<template>
  <page-header-wrapper>
    <a-card class="card" title="基础信息" :bordered="false">
      <repository-form ref="repository" :showSubmit="false" />
    </a-card>
    <a-card class="card" title="工作情况" :bordered="false">
      <ProjectForm @func="getMsgFormSon" />
    </a-card>
    <a-card class="card" title="综合评定" :bordered="false">
      <task-form ref="task" :showSubmit="false" />
    </a-card>
    <a-card class="card" title="发布设置" :bordered="false">
      <release-form ref="release" :showSubmit="false" />
    </a-card>
    <!-- fixed footer toolbar -->
    <footer-tool-bar :is-mobile="isMobile" :collapsed="sideCollapsed">
      <span class="popover-wrapper">
        <a-popover title="表单校验信息" overlayClassName="antd-pro-pages-forms-style-errorPopover" trigger="click" :getPopupContainer="trigger => trigger.parentNode">
          <template slot="content">
            <li v-for="item in errors" :key="item.key" @click="scrollToField(item.key)" class="antd-pro-pages-forms-style-errorListItem">
              <a-icon type="cross-circle-o" class="antd-pro-pages-forms-style-errorIcon" />
              <div>{{ item.message }}</div>
              <div class="antd-pro-pages-forms-style-errorField">{{ item.fieldLabel }}</div>
            </li>
          </template>
          <span class="antd-pro-pages-forms-style-errorIcon" v-if="errors.length > 0">
            <a-icon type="exclamation-circle" />{{ errors.length }}
          </span>
        </a-popover>
      </span>
      <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
    </footer-tool-bar>
  </page-header-wrapper>
</template>

<script>
import RepositoryForm from './RepositoryForm'
import TaskForm from './TaskForm'
import ProjectForm from './ProjectForm'
import ReleaseForm from './ReleaseForm'
import FooterToolBar from '@/components/FooterToolbar'
import { baseMixin } from '@/store/app-mixin'

export default {
  name: 'AdvancedForm',
  mixins: [baseMixin],
  components: {
    FooterToolBar,
    RepositoryForm,
    TaskForm,
    ProjectForm,
    ReleaseForm
  },
  data () {
    return {
      loading: false,
      errors: [],
      projectData: [],
      saveCount: 0
    }
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
    },
    getMsgFormSon (data) {
      this.saveCount++
      this.$message
        .loading('保存中，请稍后..', 0.5)
        .then(() => { this.projectData = data })
        .then(() => this.$message.success('保存成功', 1))
    },
    // 最终全页面提交
    validate () {
      if (!this.saveCount) {
        this.$message.error('请单击保存修改按钮')
        return
      }
      console.log(this.projectData)
      // const repository = this.$refs.repository
      const { $refs: { repository, task, release }, $notification } = this
      const repositoryForm = new Promise((resolve, reject) => {
        // validateFields	触发表单验证
        repository.form.validateFields((err, values) => {
          if (err) {
            reject(err)
            return
          }
          resolve(values)
        })
      })
      const taskForm = new Promise((resolve, reject) => {
        task.form.validateFields((err, values) => {
          if (err) {
            reject(err)
            return
          }
          resolve(values)
        })
      })
      const releaseForm = new Promise((resolve, reject) => {
        // validateFields	触发表单验证
        release.form.validateFields((err, values) => {
          if (err) {
            reject(err)
            return
          }
          resolve(values)
          console.log(values)
        })
      })
      // clean this.errors
      this.errors = []
      Promise.all([repositoryForm, taskForm, releaseForm]).then(values => {
        console.log(values)
        $notification['success']({
          message: '提交成功!',
          description: `成功创建员工--${values[0].name}--的人才档案!`
        })
      }).catch(() => {
        // Object.assign方法用于对象的合并
        // Object.assign(obj) === obj // true
        const errors = Object.assign({}, repository.form.getFieldsError(), task.form.getFieldsError())
        const tmp = { ...errors }
        this.errorList(tmp)
      })
    },
    errorList (errors) {
      if (!errors || errors.length === 0) {
        return
      }
      this.errors = Object.keys(errors)
        .filter(key => errors[key])
        .map(key => ({
          key: key,
          message: errors[key][0]
        }))
    },
    scrollToField (fieldKey) {
      const labelNode = document.querySelector(`label[for="${fieldKey}"]`)
      if (labelNode) {
        labelNode.scrollIntoView(true)
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .card{
    margin-bottom: 24px;
  }
  .popover-wrapper {
    /deep/ .antd-pro-pages-forms-style-errorPopover .ant-popover-inner-content {
      min-width: 256px;
      max-height: 290px;
      padding: 0;
      overflow: auto;
    }
  }
  .antd-pro-pages-forms-style-errorIcon {
    user-select: none;
    margin-right: 24px;
    color: #f5222d;
    cursor: pointer;
    i {
          margin-right: 4px;
    }
  }
  .antd-pro-pages-forms-style-errorListItem {
    padding: 8px 16px;
    list-style: none;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all .3s;

    &:hover {
      background: #e6f7ff;
    }
    .antd-pro-pages-forms-style-errorIcon {
      float: left;
      margin-top: 4px;
      margin-right: 12px;
      padding-bottom: 22px;
      color: #f5222d;
    }
    .antd-pro-pages-forms-style-errorField {
      margin-top: 2px;
      color: rgba(0,0,0,.45);
      font-size: 12px;
    }
  }
</style>
